<template>
  <div id="container"></div>
</template>

<script>
  import AMapLoader from '@amap/amap-jsapi-loader'
  window._AMapSecurityConfig = {
    securityJsCode: 'b70247b6248915e7b751d5b28dc5faba'
  }
  export default {
    data() {
      return {
        map: null
      }
    },
    methods: {
      initMap() {
        AMapLoader.load({
          key: '7c10d9e7280d13b5243b3a80be9e0723', // 申请好的Web端开发者Key，首次调用 load 时必填
          version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        })
          .then(AMap => {
            this.map = new AMap.Map('container', {
              //设置地图容器id
              viewMode: '3D', //是否为3D地图模式
              zoom: 5, //初始化地图级别
              center: [121.473667, 31.230525] //初始化地图中心点位置
            })

          })
          .catch(e => {
            console.log(e)
          })
      }
    },
    mounted() {
      //DOM初始化完成进行地图初始化
      this.initMap()
    }
  }
</script>

<style lang="less">
  #container {
    padding: 500px;
    margin: 500px;
    width: 100%;
    height: 100%;
  }
</style>
